<template>
  <div class="member-home">
    <!-- 概览 -->
    <MemberHomeOverview></MemberHomeOverview>

    <!-- 收藏 -->
    <MemberHomePanel title="我的收藏">
      <GoodsItem v-for="item in collectGoods" :key="item.id" :goods="item"></GoodsItem>
    </MemberHomePanel>

    <!-- 足迹 -->
    <MemberHomePanel title="我的足迹">
      <GoodsItem v-for="item in browseHistory" :key="item.id" :goods="item"></GoodsItem>
    </MemberHomePanel>

    <!-- 猜你喜欢 -->
    <GoodsRelevant></GoodsRelevant>
  </div>
</template>

<script>
// 个人中心首页组件
import MemberHomeOverview from '@/components/member/MemberHomeOverview'
import GoodsRelevant from '@/components/goods/GoodsRelevant'
import MemberHomePanel from '@/components/member/MemberHomePanel'
import GoodsItem from '@/components/category/GoodsItem'
import API from '@/api/member'
import { ref } from 'vue'

export default {
  name: 'index',
  components: {
    MemberHomePanel,
    GoodsRelevant,
    MemberHomeOverview,
    GoodsItem
  },
  setup() {
    // 个人收藏商品
    const collectGoods = ref([])
    // 足迹
    const browseHistory = ref([])

    // 调用发送请求的接口
    API.getCollect(1, 4)
        .then((res) => {
          console.log(res)
          collectGoods.value = res.result.items
        })

    API.getBrowseHistory(1, 4)
        .then((res) => {
          browseHistory.value = res.result.items
        })

    return {
      collectGoods,
      browseHistory
    }
  }

}
</script>

<style lang="less" scoped>
.member-home {

}

::v-deep .xtx-carousel .carousel-btn {

  &.prev {
    left: 5px;
  }

  &.next {
    right: 5px;
  }
}
</style>
